<!DOCTYPE html>
<html>
<head>
<title>Send message</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial;

}
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid white;
padding: 3px;
background-color: gray;
color:white;
}
</style>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">

	$.fn.serializeObject = function()
	{
	    var o = {};
	    var a = this.serializeArray();
	    $.each(a, function() {
	        if (o[this.name] !== undefined) {
	            if (!o[this.name].push) {
	                o[this.name] = [o[this.name]];
	            }
	            o[this.name].push(this.value || '');
	        } else {
	            o[this.name] = this.value || '';
	        }
	    });
	    return o;
	};
	
	$(function() {
	    $('form').submit(function() {
	        send(JSON.stringify($('form').serializeObject()));
	        return false;
	    });
	});
	
	function send(jsonData) {
	    $.ajax
	    ({
	        type: "POST",
	        //the url where you want to sent the userName and password to
	        url: 'messageService',
	        async: false,
	        //json object to sent to the authentication url
	        data: jsonData,
	        success: function () {
	        	clearForm($('form'));
	        	alert("Message was successfully sent"); 
	        },
	        error: function (data) {
	        	alert(data.responseText); 
	        }
	    })
	}
	
	function clearForm(ele) {

	    $(ele).find(':input').each(function() {
	        switch(this.type) {
	            case 'password':
	            case 'select-multiple':
	            case 'select-one':
	            case 'text':
	            case 'textarea':
	                $(this).val('');
	                break;
	            case 'checkbox':
	            case 'radio':
	                this.checked = false;
	        }
	    });

	}
	
	if (!!window.EventSource) {
		    var source = new EventSource('news');
		    source.addEventListener('message', function(event) {
		    	var data = JSON.parse(event.data);
		    	updateMessageTable(data);
		    	}, false);
	} else {
		document.getElementById("messages").innerHTML="Sorry, your browser does not support server-sent events...";
	}
	
	function updateMessageTable(eventData) {
		if (eventData !== undefined) {
			  var table = "<table>";
			  table += "<tr>";
			  table += "<th>Message ID</th>";
			  table += "<th>Message date</th>";
			  table += "<th>Sent by</th>";
			  table += "<th>Title</th>";
			  table += "<th>Body</th>";
			  table += "</tr>";
			  $.each(eventData, function(i, item) {
				  table += "<tr>";
				  table += "<td>" + item.messageId + "</td>";
				  table += "<td>" + item.sentDate + "</td>";
				  table += "<td>" + item.sentBy + "</td>";
				  table += "<td>" + item.title + "</td>";
				  table += "<td>" + item.body + "</td>";
				  table += "</tr>";
			  });
			  table += "</table>";
		  }
	    document.getElementById("messages").innerHTML = table;
	}
	    
</script>
<title>Insert title here</title>
</head>
<body>
	<form action="" method="post" id="sendForm">
		<table>
			<tr>
				<td>
					User name:
				</td>
				<td>
					<input type="text" name="sentBy" maxlength="30" size="20"/>
				</td>
			</tr>
			<tr>
				<td>
					Message title:
				</td>
				<td>
					<input type="text" name="title" maxlength="30" size="20"/>
				</td>
			</tr>
			<tr>	
				<td>
					Message body:
				</td>
				<td>
					<textarea name="body" rows="3" cols="20" ></textarea>
				</td>
			</tr>
			<tr>
				<td style="background-color:white"></td>
				<td style="background-color:white; text-align:right;">
					<input type="submit" value="Send">
				</td>
			</tr>
		</table>
	</form>
	<p>
	<hr>
	<p>
	Messages:
	<div id="messages" style="font-family: Arial; font-size: 12px; color: white;">
	
	</div>
</body>
</html>